<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>offsetHeight, clientHeight, scrollHeight</title>
  <style>
    .container {
      width: 300px;
      height: 150px;
      border: 5px solid black;
      padding: 10px;
      overflow: auto;
      margin: 20px;
    }
    .content {
      width: 100%;
      height: 300px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      这里是内容区域，高度大于容器高度，因此会出现滚动条。
    </div>
  </div>

  <script>
    const container = document.querySelector('.container');
    // offsetHeight 元素的总高度，包括内容高度、内边距（padding）、
    // 水平滚动条高度（如果存在）、以及边框（border）。
    // 不包括外边距（margin）。
    console.log('offsetHeight:', container.offsetHeight); // 150 + 10 + 10 + 5 +5 = 180

    // clientHeight 元素的可见内容高度，
    // 包括内容高度和内边距（padding），
    // 但不包括水平滚动条高度、边框（border）和外边距（margin）。
    console.log('clientHeight:', container.clientHeight); // 不包括border就是170

    // scrollHeight 元素的实际内容高度，
    // 包括不可见的溢出部分（scrollable content），大于等于 clientHeight。
    // 包括内容和内边距的高度，但不包括边框和外边距。
    console.log('scrollHeight:', container.scrollHeight); // 320
  </script>
</body>
</html>
